<template>
    <div class="shop-list-container">
        <div v-for="item in data" :key="item.src" class="shop-item">
            <div class="item-image">
                <img :src="item.src" class="shop-image" />
            </div>
            <div class="item-info">
                <h3 class="item-title">{{ item.title }}</h3>
                <p class="item-description">{{ item.description }}</p>
                <div class="price-stock-container">
                    <p class="item-price">价格: ￥{{ item.price }}</p>
                </div>
            </div>
            <div class="item-actions">
                <el-button type="primary" size="small" @click="handleBuyClick(item.shopHref)">立即购买</el-button>
                <div class="admin-actions" v-if="isAdmin">
                    <el-button type="danger" size="small" @click="handleDelete(item)">删除</el-button>
                    <el-input-number v-model="item.stock" :min="0" size="small" @change="handleStockChange(item)" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { userGet } from '@/api/user'

const props = defineProps(['data'])
const userStore = useUserStore()

const isAdmin = computed(() => {
    return () => {
        userGet()
        .then((res)  => {
            return res.code === 0 && res.data.isAdministration == 1
        })
    }
})


const handleBuyClick = href => {
    window.location.href = href
}

const handleDelete = (item) => {
    // 实际项目中这里应该调用API删除商品
    console.log('删除商品:', item)
    // 临时前端删除
    const index = props.data.findIndex(i => i.src === item.src)
    if (index !== -1) {
        props.data.splice(index, 1)
    }
}

const handleStockChange = (item) => {
    // 实际项目中这里应该调用API更新库存
    console.log('更新库存:', item.title, item.stock)
}
</script>

<style lang="less" scoped>
.shop-list-container {
    margin: 0 auto;
    padding: 20px;
}

.shop-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
}

.item-image {
    flex: 0 0 120px;
    margin-right: 20px;

    .shop-image {
        width: 100%;
        height: auto;
        border-radius: 4px;
    }
}

.item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 0;

    .item-title {
        margin: 0 0 6px 0;
        font-size: 18px;
        text-align: left;
    }

    .item-description {
        margin: 0 0 12px 0;
        color: #666;
        font-size: 14px;
        text-align: left;
        line-height: 1.5;
    }

    .price-stock-container {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 8px;
    }

    .item-price {
        margin: 0;
        color: #f56c6c;
        font-weight: bold;
        font-size: 20px;
    }

    .item-stock {
        margin: 0;
        color: #67c23a;
        font-size: 10px;
    }
}

.item-actions {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 10px 0;

    .admin-actions {
        display: flex;
        gap: 10px;
        align-items: center;
    }
}
</style>
